<template>
    <aside class="site-sidebar" :style="{width: (sidebarFold?70:230)+'px'}">
        <div class="site-sidebar__inner">
            <el-menu
                    :default-active="menuActiveName"
                    :collapse="sidebarFold"
                    menu-trigger="click"
                    :background-color="themeColor"
                    :collapseTransition="false"
                    class="site-sidebar__menu">
                <el-menu-item index="home" @click="$router.push({ path: '/sys' })">
                    <i class="fa fa-home" aria-hidden="true"></i>&nbsp;
                    <span slot="title">首页</span>
                </el-menu-item>
                <side-bar-menu
                        v-for="menu in menuList"
                        :key="menu.menuId"
                        :menu="menu">
                </side-bar-menu>
            </el-menu>
        </div>
    </aside>
</template>

<script>
    import sideBarMenu from './sideBarMenu'
    export default {
        name: "sideBar",
        components:{sideBarMenu},
        data(){
            return {
            }
        },
        watch: {
            $route: 'routeHandle'
        },
        computed:{
            menuActiveName: {
                get () {
                    return this.$store.state.common.menuActiveName },
                set (val) { this.$store.commit('updateMenuActiveName', val) }
            },
            sidebarFold: {
                get () { return this.$store.state.common.sidebarFold }
            },
            menuList: {
                get () { return this.$store.state.common.menuList }
            },

            mainTabsActiveName: { //修订为path索引唯一tabs区分
                get () { return this.$store.state.common.mainTabsActiveName },
                set (val) { this.$store.commit('updateMainTabsActiveName', val) }
            },
            mainTabs: {
                get () { return this.$store.state.common.mainTabs },
                set (val) { this.$store.commit('updateMainTabs', val) }
            },
            themeColor(){
                return this.$store.state.theme.themeColor === 'white'?
                    'floralwhite':this.$store.state.theme.themeColor === 'blue'?
                        'lightskyblue':'dimgray'
            }
        },
        methods:{
            routeHandle(route){
                //保留home Tab标签
                const home = 'home';
                if(route.name != home){

                    let homeTab = this.mainTabs.filter(item => item.name === home)[0];
                    if (!homeTab) {
                        homeTab = {
                            path: '/sys',
                            name: 'home',
                            title: '首页',
                            type: 'route',
                        }
                        this.mainTabs = this.mainTabs.concat(homeTab)
                    }
                }

                // tab选中, 不存在先添加
                let tab = this.mainTabs.filter(item => item.path === route.path)[0]
                if (!tab) {
                    tab = {
                        path: route.path,
                        name: route.name,
                        title: route.meta.title,
                        type: route.meta.type,
                        url: route.meta.url,
                    }
                    this.mainTabs = this.mainTabs.concat(tab)
                }
                this.mainTabsActiveName = tab.name
                this.menuActiveName = tab.name

            }
        },
        created(){
            this.routeHandle(this.$route)
        },
    }
</script>

<style scoped>
    .site-sidebar {
        position: fixed;
        top: 50px;
        left: 0;
        bottom: 0;
        z-index: 1020;
        /*width: 230px;*/
        /*height: calc(100% - 60px);*/
        overflow:scroll;
    }

</style>